<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas width="1200" height="640" id="main"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;

            var renderer = new clay.Renderer({
                canvas : document.getElementById('main')
            });
            var scene = new clay.Scene();
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect(),
                far: 500
            });
            console.profile('generate');
            var sphere = new clay.geometry.Sphere({
                widthSegments: 400,
                heightSegments: 200
            });
            console.profileEnd('generate');
            sphere.generateUniqueVertex();
            sphere.generateBarycentric();

            var shader = new Shader({
                vertex: Shader.source('clay.wireframe.vertex'),
                fragment: Shader.source('clay.wireframe.fragment')
            });
            var material = new clay.Material({
                shader: shader,
                transparent: true,
                depthTest: false
            });
            material.set('width', 2);

            camera.position.set(0, 1, 2);
            camera.lookAt(scene.position);

            var sphereMesh = new clay.Mesh({
                geometry: sphere,
                material: material
            });
            scene.add(sphereMesh);

            renderer.render(scene, camera);
            setInterval(function() {
                var renderInfo = renderer.render(scene, camera);
                sphereMesh.rotation.rotateY(Math.PI/500);
            }, 20);

        </script>
    </body>
</html>